<template>
	<div class="swiper-contain" :class="{'is-official':is_official}">
		<swiper :options="swiperOption" v-if="swiperSlides.length">
			<swiper-slide v-for="(slide,index) in swiperSlides" :key="index">
				<a href="javascript:;" class="swiper-slide-a">
					<img :src="slide.ad_url" alt="大厅banner">
				</a>
			</swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	import 'swiper/dist/css/swiper.css'
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default{
		name:'Swiper',
		components:{
			swiper,
			swiperSlide
		},
		props:{
			swiperSlides:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data(){
			return{
				swiperOption: {
					pagination: {
						el: '.swiper-pagination',
						clickable: true
					},
          autoplay: {
            delay: 3000,
            disableOnInteraction: false
          }
				},
				is_official: typeof(window.is_official) !== 'undefined' ? window.is_official : false,
			}
		}
	}
</script>

<style lang="scss">
	.swiper-contain{
		position: relative;
		padding-top: 40%;
		.swiper-container{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}
	}
	.swiper-slide{
		overflow: hidden;
		height: 9.37rem;
		.swiper-slide-a{
			position: absolute;
			top: 0;
			bottom: 0;
			width: 62.5rem;
			left: 50%;
			transform: translateX(-50%);
			overflow: hidden;
			img{
				display: block;
				width: 100%;
				height: 100%;
				color: transparent;
			}
		}
	}
	.is-official{
		.swiper-slide-a{
			width: 23.43rem !important;
			height: 9.37rem !important;
		}
	}
</style>
